<template>
  <div class="about-page">
    <!-- Header Section -->
    <section class="about-header" 
             :style="{ backgroundImage: `url(${require('../assets/img/subheader-5.jpg')})` }">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h1 class="page-title" data-aos="fade-up">关于我们</h1>
            <p class="page-subtitle" data-aos="fade-up" data-aos-delay="200">
              用音乐连接世界，传递美好
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- About Content -->
    <section class="about-content py-5">
      <div class="container">
        <!-- Company Introduction -->
        <div class="row mb-5">
          <div class="col-12" data-aos="fade-up">
            <div class="company-intro">
              <h2 class="section-title text-center mb-4">我们的故事</h2>
              <div class="intro-content">
                <p class="lead">MusicVibe 诞生于对音乐的无限热爱和对艺术的执着追求。我们致力于为音乐爱好者打造一个完美的数字音乐平台，让每一个音符都能触动心灵，让每一首歌曲都能传递情感。</p>
                
                <p>从2020年开始，我们一直在努力为用户提供最优质的音乐体验。无论您是流行音乐的忠实粉丝，还是古典音乐的鉴赏家，亦或是摇滚乐的狂热爱好者，在这里都能找到属于您的音乐天地。我们深信，音乐无国界，艺术无界限，每个人都应该享受到高品质的音乐服务。</p>
                
                <p>我们不仅仅是一个音乐平台，更是音乐文化的传播者和创新者。通过先进的音频技术、人工智能推荐算法，以及与全球顶级艺术家的深度合作，我们为用户带来前所未有的音乐体验。我们的团队由来自世界各地的音乐专家、技术工程师和产品设计师组成，共同致力于推动音乐产业的数字化转型。</p>
                
                <p>在技术创新方面，我们始终走在行业前沿。采用最新的音频编解码技术，确保用户享受到无损音质；利用机器学习算法，为每位用户提供个性化的音乐推荐；通过区块链技术，保护艺术家的版权权益；借助云计算平台，实现全球范围内的音乐内容分发。</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Mission & Vision -->
        <div class="row mb-5" data-aos="fade-up" data-aos-delay="200">
          <div class="col-lg-6 mb-4">
            <div class="mission-card glass">
              <div class="card-icon">
                <i class="fas fa-bullseye"></i>
              </div>
              <h3 class="card-title">我们的使命</h3>
              <p class="card-description">
                通过技术创新和艺术传播，让世界各地的音乐爱好者都能享受到高质量、个性化的音乐体验。我们致力于连接艺术家与听众，构建一个充满活力的音乐生态圈，推动音乐文化的传承与发展。
              </p>
              <ul class="mission-points">
                <li>为用户提供极致的音乐体验</li>
                <li>支持原创音乐人的创作与发展</li>
                <li>促进音乐文化的全球交流</li>
                <li>推动音乐产业的技术革新</li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6 mb-4">
            <div class="vision-card glass">
              <div class="card-icon">
                <i class="fas fa-eye"></i>
              </div>
              <h3 class="card-title">我们的愿景</h3>
              <p class="card-description">
                成为全球领先的音乐平台，让音乐成为连接世界的纽带。我们希望在未来10年内，能够服务10亿用户，支持100万独立音乐人，成为音乐爱好者心中不可替代的音乐伙伴。
              </p>
              <ul class="vision-points">
                <li>成为用户首选的音乐平台</li>
                <li>建立最完善的音乐生态系统</li>
                <li>引领音乐科技发展方向</li>
                <li>传播优秀的音乐文化</li>
              </ul>
            </div>
          </div>
        </div>

        <!-- Stats Section -->
        <div class="stats-section py-5" data-aos="fade-up">
          <div class="row text-center">
            <div class="col-lg-3 col-md-6 mb-4">
              <div class="stat-item glass">
                <div class="stat-icon">
                  <i class="fas fa-users"></i>
                </div>
                <div class="stat-number">2.5M+</div>
                <div class="stat-label">活跃用户</div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
              <div class="stat-item glass">
                <div class="stat-icon">
                  <i class="fas fa-music"></i>
                </div>
                <div class="stat-number">500K+</div>
                <div class="stat-label">音乐曲目</div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
              <div class="stat-item glass">
                <div class="stat-icon">
                  <i class="fas fa-microphone"></i>
                </div>
                <div class="stat-number">15K+</div>
                <div class="stat-label">签约艺术家</div>
              </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-4">
              <div class="stat-item glass">
                <div class="stat-icon">
                  <i class="fas fa-calendar-alt"></i>
                </div>
                <div class="stat-number">1K+</div>
                <div class="stat-label">年度演出</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Core Advantages -->
    <section class="advantages-section py-5 gradient-bg">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">我们的核心优势</h2>
          <p class="section-subtitle text-white">技术创新与用户体验的完美结合</p>
        </div>
        
        <div class="row">
          <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up">
            <div class="advantage-card glass">
              <div class="advantage-icon">
                <i class="fas fa-brain"></i>
              </div>
              <h4 class="advantage-title">智能推荐算法</h4>
              <p class="advantage-description">
                基于深度学习的推荐引擎，分析用户的听歌习惯、情感偏好、时间模式等多维度数据，
                为每位用户打造独一无二的音乐体验。我们的算法不仅考虑用户的历史行为，
                还会根据当前情境、天气、情绪等因素进行实时调整。
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
            <div class="advantage-card glass">
              <div class="advantage-icon">
                <i class="fas fa-shield-alt"></i>
              </div>
              <h4 class="advantage-title">版权保护体系</h4>
              <p class="advantage-description">
                我们建立了完善的版权保护机制，采用区块链技术确保每一首歌曲的版权归属清晰可追溯。
                与全球超过500家唱片公司建立合作关系，拥有超过5000万首正版音乐授权。
                同时为独立音乐人提供版权登记和收益分配服务。
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="200">
            <div class="advantage-card glass">
              <div class="advantage-icon">
                <i class="fas fa-satellite-dish"></i>
              </div>
              <h4 class="advantage-title">全球CDN网络</h4>
              <p class="advantage-description">
                部署在6大洲的内容分发网络，确保用户在任何地点都能享受到流畅的音乐播放体验。
                采用自适应码率技术，根据网络状况自动调整音质，在保证音质的同时减少缓冲时间。
                99.9%的服务可用性保证。
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="300">
            <div class="advantage-card glass">
              <div class="advantage-icon">
                <i class="fas fa-users-cog"></i>
              </div>
              <h4 class="advantage-title">社区生态建设</h4>
              <p class="advantage-description">
                构建了活跃的音乐社区，用户可以创建歌单、分享音乐心得、参与话题讨论。
                为音乐人提供直播演出平台，让粉丝与艺术家零距离互动。
                定期举办线上音乐节、新歌首发会等活动，丰富用户的音乐生活。
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="400">
            <div class="advantage-card glass">
              <div class="advantage-icon">
                <i class="fas fa-mobile-alt"></i>
              </div>
              <h4 class="advantage-title">跨平台体验</h4>
              <p class="advantage-description">
                支持iOS、Android、Web、桌面端等全平台，数据云同步让您的音乐随时随地相伴。
                针对不同设备优化界面设计，无论是手机、平板还是智能音响，都能提供最佳的操作体验。
                支持离线下载，即使在没有网络的环境下也能享受音乐。
              </p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-4" data-aos="fade-up" data-aos-delay="500">
            <div class="advantage-card glass">
              <div class="advantage-icon">
                <i class="fas fa-chart-line"></i>
              </div>
              <h4 class="advantage-title">数据驱动决策</h4>
              <p class="advantage-description">
                通过大数据分析了解音乐流行趋势，为唱片公司提供市场洞察报告。
                实时监控平台性能指标，持续优化用户体验。
                为艺术家提供详细的数据分析报告，帮助他们了解粉丝画像和作品表现。
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Company Timeline -->
    <section class="timeline-section py-5 gradient-bg-2">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">发展历程</h2>
          <p class="section-subtitle text-white">见证我们一路走来的每个重要时刻</p>
        </div>
        
        <div class="timeline">
          <div 
            v-for="(milestone, index) in companyMilestones" 
            :key="index"
            class="timeline-item"
            :class="{ 'timeline-right': index % 2 === 1 }"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div class="timeline-content glass">
              <div class="timeline-year">{{ milestone.year }}</div>
              <h4 class="timeline-title">{{ milestone.title }}</h4>
              <p class="timeline-description">{{ milestone.description }}</p>
              <div class="timeline-stats" v-if="milestone.stats">
                <span v-for="stat in milestone.stats" :key="stat" class="timeline-stat">{{ stat }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Values Section -->
    <section class="values-section py-5">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title">我们的价值观</h2>
          <p class="section-subtitle">指引我们前行的核心理念</p>
        </div>
        
        <!-- Main Values Grid -->
        <div class="values-grid mb-5">
          <div 
            v-for="(value, index) in companyValues" 
            :key="index"
            class="value-item"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div class="value-card-modern">
              <div class="value-number">{{ String(index + 1).padStart(2, '0') }}</div>
              <div class="value-icon-modern">
                <i :class="value.icon"></i>
              </div>
              <div class="value-content">
                <h4 class="value-title-modern">{{ value.title }}</h4>
                <p class="value-description-modern">{{ value.description }}</p>
              </div>
              <div class="value-decoration"></div>
            </div>
          </div>
        </div>
        
        <!-- Values Summary -->
        <div class="values-summary" data-aos="fade-up" data-aos-delay="800">
          <div class="row align-items-center">
            <div class="col-lg-8">
              <h3 class="summary-title">我们的承诺</h3>
              <p class="summary-text">
                这些价值观不仅是我们企业文化的核心，更是我们对每一位用户的郑重承诺。
                我们将始终坚持这些理念，为全球音乐爱好者创造更美好的音乐体验。
              </p>
            </div>
            <div class="col-lg-4 text-center">
              <div class="commitment-badge">
                <i class="fas fa-certificate"></i>
                <span>品质保证</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="services-section py-5">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title">我们的服务</h2>
          <p class="section-subtitle">全方位的音乐生态服务</p>
        </div>
        
        <div class="services-content">
          <div class="row mb-5">
            <div class="col-lg-8 mx-auto" data-aos="fade-up">
              <div class="service-intro glass">
                <h3 class="service-main-title">面向音乐爱好者</h3>
                <p class="service-description">
                  我们为音乐爱好者提供全方位的数字音乐服务。从海量正版音乐库到个性化推荐系统，
                  从高品质音频到沉浸式体验，每一个功能都经过精心设计和不断优化。
                  我们的免费版本已经能满足大部分用户的基础需求，而会员服务则提供更多专业功能和特权。
                </p>
              </div>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-4" data-aos="fade-up">
              <div class="service-detail-card">
                <h4 class="service-title">
                  <i class="fas fa-headphones me-2"></i>
                  个人用户服务
                </h4>
                <ul class="service-features">
                  <li>5000万+ 正版音乐曲库</li>
                  <li>无损音质流媒体播放</li>
                  <li>AI智能推荐系统</li>
                  <li>个性化歌单创建</li>
                  <li>离线下载功能</li>
                  <li>跨设备同步播放</li>
                  <li>音乐社区互动</li>
                  <li>演唱会直播观看</li>
                  <li>歌词同步显示</li>
                  <li>睡眠定时关闭</li>
                </ul>
              </div>
            </div>
            <div class="col-md-6 mb-4" data-aos="fade-up" data-aos-delay="100">
              <div class="service-detail-card">
                <h4 class="service-title">
                  <i class="fas fa-microphone me-2"></i>
                  音乐人服务
                </h4>
                <ul class="service-features">
                  <li>作品上传与分发</li>
                  <li>版权保护与登记</li>
                  <li>收益分成透明化</li>
                  <li>粉丝数据分析</li>
                  <li>直播表演平台</li>
                  <li>专辑制作支持</li>
                  <li>音乐推广服务</li>
                  <li>合作机会对接</li>
                  <li>专业设备租赁</li>
                  <li>行业培训课程</li>
                </ul>
              </div>
            </div>
          </div>
          
          <div class="row mt-4">
            <div class="col-12" data-aos="fade-up">
              <div class="enterprise-service glass">
                <h3 class="service-main-title text-center mb-4">企业级解决方案</h3>
                <div class="row">
                  <div class="col-md-4 mb-3">
                    <div class="enterprise-feature">
                      <h5><i class="fas fa-building me-2"></i>商业空间背景音乐</h5>
                      <p>为餐厅、咖啡厅、商场等提供定制化背景音乐解决方案，支持场景化音乐推荐和远程控制。</p>
                    </div>
                  </div>
                  <div class="col-md-4 mb-3">
                    <div class="enterprise-feature">
                      <h5><i class="fas fa-podcast me-2"></i>内容创作者服务</h5>
                      <p>为视频制作者、播客主播等提供免费商用音乐库，避免版权纠纷，提升内容质量。</p>
                    </div>
                  </div>
                  <div class="col-md-4 mb-3">
                    <div class="enterprise-feature">
                      <h5><i class="fas fa-cogs me-2"></i>API技术服务</h5>
                      <p>提供音乐API接口，帮助第三方应用集成音乐功能，支持音乐识别、推荐、播放等服务。</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Future Plans -->
    <section class="future-plans py-5 gradient-bg-3">
      <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
          <h2 class="section-title text-white">未来规划</h2>
          <p class="section-subtitle text-white">持续创新，引领音乐科技发展</p>
        </div>
        
        <div class="row">
          <div class="col-12" data-aos="fade-up" data-aos-delay="200">
            <div class="plans-content">
              <div class="row">
                <div class="col-lg-6 mb-4">
                  <div class="plan-card glass">
                    <div class="plan-year">2024-2025</div>
                    <h4 class="plan-title">技术革新年</h4>
                    <div class="plan-details">
                      <p><strong>空间音频技术：</strong>全面推广3D音频和沉浸式音乐体验</p>
                      <p><strong>AI作曲助手：</strong>为音乐人提供AI辅助创作工具</p>
                      <p><strong>虚拟演唱会：</strong>打造VR/AR音乐演出新体验</p>
                      <p><strong>语音交互：</strong>完善语音控制和音乐对话功能</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 mb-4">
                  <div class="plan-card glass">
                    <div class="plan-year">2025-2026</div>
                    <h4 class="plan-title">全球扩张年</h4>
                    <div class="plan-details">
                      <p><strong>市场拓展：</strong>进入20个新兴市场，本地化服务</p>
                      <p><strong>多语言支持：</strong>支持50种语言界面和音乐内容</p>
                      <p><strong>文化交流：</strong>举办全球音乐文化交流活动</p>
                      <p><strong>教育合作：</strong>与音乐学院建立教育合作项目</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 mb-4">
                  <div class="plan-card glass">
                    <div class="plan-year">2026-2027</div>
                    <h4 class="plan-title">生态完善年</h4>
                    <div class="plan-details">
                      <p><strong>智能硬件：</strong>推出MusicVibe品牌智能音响</p>
                      <p><strong>区块链音乐：</strong>建立去中心化音乐版权交易平台</p>
                      <p><strong>社交功能：</strong>打造音乐主题的社交网络</p>
                      <p><strong>健康音乐：</strong>开发音乐治疗和冥想音乐服务</p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-6 mb-4">
                  <div class="plan-card glass">
                    <div class="plan-year">长远愿景</div>
                    <h4 class="plan-title">行业引领者</h4>
                    <div class="plan-details">
                      <p><strong>技术标准：</strong>参与制定音乐行业技术标准</p>
                      <p><strong>可持续发展：</strong>推进绿色音乐科技发展</p>
                      <p><strong>人才培养：</strong>建立音乐科技人才培养体系</p>
                      <p><strong>社会责任：</strong>支持音乐公益和文化传承项目</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      companyValues: [
        {
          icon: 'fas fa-heart',
          title: '热爱音乐',
          description: '音乐是我们的灵魂，我们相信音乐能够改变世界，治愈心灵'
        },
        {
          icon: 'fas fa-users',
          title: '用户至上',
          description: '始终将用户体验放在首位，不断优化产品和服务'
        },
        {
          icon: 'fas fa-lightbulb',
          title: '创新驱动',
          description: '拥抱技术变革，用创新的方式重新定义音乐体验'
        },
        {
          icon: 'fas fa-globe',
          title: '开放包容',
          description: '欢迎所有音乐风格和文化，打造多元化的音乐平台'
        },
        {
          icon: 'fas fa-star',
          title: '追求卓越',
          description: '对品质的执着追求，力求在每个细节上做到完美'
        },
        {
          icon: 'fas fa-handshake',
          title: '合作共赢',
          description: '与艺术家、合作伙伴携手共进，创造更大价值'
        }
      ],
      companyMilestones: [
        {
          year: '2021',
          title: '公司成立',
          description: '在对音乐的无限热爱驱动下，MusicVibe正式成立，开始我们的音乐征程。',
          stats: ['创始团队5人', '种子轮100万融资']
        },
        {
          year: '2022',
          title: '产品上线',
          description: '经过一年的精心打磨，我们的音乐平台正式上线，首批用户突破10万。',
          stats: ['10万注册用户', '1万首歌曲']
        },
        {
          year: '2023',
          title: '快速发展',
          description: '用户数量爆发式增长，与多家知名唱片公司达成合作协议。',
          stats: ['100万用户', '50万首歌曲', 'A轮融资1000万']
        },
        {
          year: '2024',
          title: '行业领先',
          description: '荣获多项行业大奖，成为音乐科技领域的标杆企业。',
          stats: ['250万用户', '500万首歌曲', '年度最佳音乐平台奖']
        },
        {
          year: '2025',
          title: '全球布局',
          description: '业务拓展至全球50+国家，成为国际化的音乐平台。',
          stats: ['全球用户', '无损音质', 'AI推荐算法']
        }
      ],
    }
  }
}
</script>

<style scoped>
/* Header Styles */
.about-header {
  height: 400px;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.page-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 2rem;
}

/* About Content */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
}

.about-text {
  color: white;
}

.about-text .lead {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.about-text p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

/* Stats Section */
.stat-item {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: translateY(-5px);
  border-color: rgba(78, 205, 196, 0.3);
}

.stat-icon {
  font-size: 3rem;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}

/* Advantages Section */
.advantage-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s ease;
}

.advantage-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-5px);
  border-color: rgba(78, 205, 196, 0.5);
}

.advantage-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.advantage-icon i {
  font-size: 1.8rem;
  color: white;
}

.advantage-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
}

.advantage-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 1rem;
}

/* Values Section - Modern Design */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.value-item {
  position: relative;
}

.value-card-modern {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.value-card-modern:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-8px);
  border-color: rgba(78, 205, 196, 0.5);
}

.value-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(78, 205, 196, 0.2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.value-icon-modern {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.value-icon-modern i {
  font-size: 1.8rem;
  color: white;
}

.value-icon-modern::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(78, 205, 196, 0.3));
  border-radius: 23px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.value-card-modern:hover .value-icon-modern::after {
  opacity: 1;
}

.value-content {
  flex: 1;
}

.value-title-modern {
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  position: relative;
}

.value-title-modern::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  transition: width 0.3s ease;
}

.value-card-modern:hover .value-title-modern::after {
  width: 60px;
}

.value-description-modern {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 1rem;
}

.value-decoration {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(78, 205, 196, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Values Summary */
.values-summary {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 3rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.summary-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.1rem;
  line-height: 1.7;
}

.commitment-badge {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color: white;
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  position: relative;
}

.commitment-badge i {
  font-size: 3rem;
  display: block;
  margin-bottom: 1rem;
}

.commitment-badge span {
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Story Highlights */
.story-highlights {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.text-gradient {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Company Introduction */
.company-intro {
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.7);
  padding: 3rem;
  border-radius: 20px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.intro-content {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.intro-content p {
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.intro-content .lead {
  font-size: 1.3rem;
  font-weight: 500;
  color: white;
  margin-bottom: 2rem;
}

/* Mission & Vision Cards */
.mission-card,
.vision-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  height: 100%;
  transition: all 0.3s ease;
}

.mission-card:hover,
.vision-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-5px);
  border-color: rgba(78, 205, 196, 0.5);
}

.card-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.card-icon i {
  font-size: 1.8rem;
  color: white;
}

.card-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
}

.card-description {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.mission-points,
.vision-points {
  list-style: none;
  padding: 0;
}

.mission-points li,
.vision-points li {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  padding-left: 2rem;
}

.mission-points li:before,
.vision-points li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ecdc4;
  font-weight: bold;
  font-size: 1.2rem;
}

.mission-points li:last-child,
.vision-points li:last-child {
  border-bottom: none;
}

/* Timeline Styles */
.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.timeline::before {
  content: '';
  position: absolute;
  width: 3px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1.5px;
}

.timeline-item {
  padding: 2rem 2rem 2rem 0;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -11px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: 3px solid #0a0a0a;
  top: 2.5rem;
  border-radius: 50%;
  z-index: 1;
}

.timeline-right {
  left: 50%;
  padding: 2rem 0 2rem 2rem;
}

.timeline-right::after {
  left: -9px;
}

.timeline-content {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  position: relative;
}

.timeline-year {
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.timeline-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.timeline-description {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.timeline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.timeline-stat {
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Services Section */
.service-intro {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
}

.service-main-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
}

.service-description {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}

.service-detail-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
}

.service-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

.service-title i {
  color: #4ecdc4;
}

.service-features {
  list-style: none;
  padding: 0;
}

.service-features li {
  color: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  padding-left: 2rem;
}

.service-features li:before {
  content: '●';
  position: absolute;
  left: 0;
  color: #4ecdc4;
  font-size: 1.2rem;
}

.service-features li:last-child {
  border-bottom: none;
}

.enterprise-service {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 3rem;
}

.enterprise-feature h5 {
  color: white;
  font-weight: 600;
  margin-bottom: 1rem;
}

.enterprise-feature p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.enterprise-feature i {
  color: #4ecdc4;
}

/* Future Plans */
.plan-card {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2rem;
  height: 100%;
  transition: all 0.3s ease;
}

.plan-card:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translateY(-5px);
  border-color: rgba(78, 205, 196, 0.5);
}

.plan-year {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}

.plan-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
}

.plan-details p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  line-height: 1.6;
}

.plan-details strong {
  color: #4ecdc4;
}

/* Responsive */
@media (max-width: 768px) {
  .page-title {
    font-size: 2.5rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .team-image {
    height: 200px;
  }
  
  .story-highlights {
    margin-top: 2rem;
  }
  
  .intro-content .lead {
    font-size: 1.2rem;
  }
  
  .card-title {
    font-size: 1.5rem;
  }
  
  .mission-card,
  .vision-card {
    padding: 2rem;
  }
  
  .values-grid {
    grid-template-columns: 1fr;
  }
  
  .values-summary {
    padding: 2rem 1rem;
  }
  
  .timeline::before {
    left: 20px;
  }
  
  .timeline-item {
    width: 100%;
    padding-left: 3rem;
    padding-right: 0;
  }
  
  .timeline-item::after {
    left: 9px;
  }
  
  .timeline-right {
    left: 0;
    padding-left: 3rem;
    padding-right: 0;
  }
  
  .timeline-right::after {
    left: 9px;
  }
  
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}
</style>
